<!DOCTYPE html>
<html>
<head>
<title>Account</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="css/verify.css">
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Fashion Mania Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- start menu -->
<link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" />
<style>
	button {
		background: #52d0c4;
		color: #FFF;
		font-size: 0.9em;
		padding: 0.4em 1em;
		transition: 0.5s all;
		-webkit-transition: 0.5s all;
		-moz-transition: 0.5s all;
		-o-transition: 0.5s all;
		display: inline-block;
		text-transform: uppercase;
		border: none;
		outline: none;
	}
</style>
<script type="text/javascript" src="js/memenu.js"></script>
<!--<script>$(document).ready(function(){$(".memenu").memenu();});</script>-->
<script src="js/simpleCart.min.js"> </script>
<script src="js/jquery-3.3.1.js"></script>
<script src="layer/layer.js"></script>
<script type="text/javascript" src="js/verify.js" ></script>

<!-- slide -->
</head>
<body>
<!--header-->
<div class="header">
	<div class="header-top">
		<div class="container">
			<div class="col-sm-4 logo">
				<a href="index.html"><img src="images/logo.png" alt=""></a>
			</div>
			<div class="col-sm-4 header-left" style="width: 400px">
				<div id="userInfo">
				</div>
				<div class="cart box_1">
					<a href="checkout.html">
						<h3>
							<div class="total">
								<img src="images/cart.png" alt=""/>
							</div>
						</h3>
					</a>
					<p><a href="javascript:;" class="simpleCart_empty">购物车</a></p>

				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<div class="container">
		<div class="head-top">
			<div class="col-sm-2 number">
				<span><i class="glyphicon glyphicon-phone"></i>085 596 234</span>
			</div>
			<div class="col-sm-8 h_menu4">
				<ul class="memenu skyblue">
					<li class=" grid"><a  href="index.html">主页</a></li>
					<li><a  href="products.html">男子</a>
						<div class="mepanel">
							<div class="row">
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">所有服饰</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">上衣</a></li>
											<li><a style="color: black" href="products.html">短袖体恤</a></li>
											<li><a style="color: black" href="products.html">运动卫衣</a></li>
											<li><a style="color: black" href="products.html">夹克/外套</a></li>
											<li><a style="color: black" href="products.html">棉服/羽绒服</a></li>
											<li><a style="color: black" href="products.html">运动下装</a></li>
											<li><a style="color: black" href="products.html">泳裤</a></li>
											<li><a style="color: black" href="products.html">比赛服 & Chinos</a></li>
										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">所有鞋类</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">跑步</a></li>
											<li><a style="color: black" href="products.html">篮球</a></li>
											<li><a style="color: black" href="products.html">户外</a></li>
											<li><a style="color: black" href="products.html">足球</a></li>
											<li><a style="color: black" href="products.html">网球</a></li>
											<li><a style="color: black" href="products.html">拖鞋</a></li>
											<li><a style="color: black" href="products.html">休闲</a></li>
										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">配附件类</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">包</a></li>
											<li><a style="color: black" href="products.html">袜子</a></li>
											<li><a style="color: black" href="products.html">帽子/手套/围巾</a></li>
											<li><a style="color: black" href="products.html">足球/篮球</a></li>
											<li><a style="color: black" href="products.html">运动装备</a></li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li><a  href="p">女子</a>
						<div class="mepanel">
							<div class="row">
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">所有服饰</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">上衣</a></li>
											<li><a style="color: black" href="products.html">短袖体恤</a></li>
											<li><a style="color: black" href="products.html">运动卫衣</a></li>
											<li><a style="color: black" href="products.html">夹克/外套</a></li>
											<li><a style="color: black" href="products.html">短裙/连衣裙</a></li>
											<li><a style="color: black" href="products.html">运动下装</a></li>
										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">所有鞋类</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">跑步</a></li>
											<li><a style="color: black" href="products.html">户外</a></li>
											<li><a style="color: black" href="products.html">足球</a></li>
											<li><a style="color: black" href="products.html">网球</a></li>
											<li><a style="color: black" href="products.html">拖鞋</a></li>
											<li><a style="color: black" href="products.html">休闲</a></li>
										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">配附件类</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">包</a></li>
											<li><a style="color: black" href="products.html">袜子</a></li>
											<li><a style="color: black" href="products.html">帽子/手套/围巾</a></li>
											<li><a style="color: black" href="products.html">球类</a></li>
											<li><a style="color: black" href="products.html">运动装备</a></li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li><a  href="typo.html">品牌</a></li>
					<li><a class="color6" href="">联系我们</a></li>
				</ul>
			</div>
			<div class="col-sm-2 search">
				<a class="play-icon popup-with-zoom-anim" href="#small-dialog"><i class="glyphicon glyphicon-search"> </i> </a>
			</div>
			<div class="clearfix"> </div>
			<!---pop-up-box---->
			<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
			<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
			<!---//pop-up-box---->
			<div id="small-dialog" class="mfp-hide">
				<div class="search-top">
					<div class="login">
						<input type="submit" value="">
						<input type="text" value="Type something..." onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '';}">
					</div>
					<p>	Shopping</p>
				</div>
			</div>
			<script>
                $(document).ready(function() {
                    $('.popup-with-zoom-anim').magnificPopup({
                        type: 'inline',
                        fixedContentPos: false,
                        fixedBgPos: true,
                        overflowY: 'auto',
                        closeBtnInside: true,
                        preloader: false,
                        midClick: true,
                        removalDelay: 300,
                        mainClass: 'my-mfp-zoom-in'
                    });

                });
			</script>
			<!---->
		</div>
	</div>
</div>
<!--//header-->
<div class="account">
	<div class="container">
		<h2 style="display: inline;">登陆</h2>/<a style="color: black" href="register.html">注册</a>
		<div class="account_grid">
			<div class="col-md-6 login-right">
				<form id="myform">
					<input id="flag" type="hidden" value="0">
					<span>账号</span>
					<input id="account" name="account" type="text">
				
					<span>密码</span>
					<input id="password" name="password" type="password">

					<div id="mpanel4" style="margin-top:50px;">
					</div>
					<div class="word-in">
						<a class="forgot" href="#">忘记密码?</a>
						<button id="submit"  type="button">登陆</button>
				  	</div>
			    </form>
			</div>	
			<div class="col-md-6 login-left">
				<h4><b>创建新用户</b></h4>
				<p style="color: black; font-size: 16px">创建一个帐户与我们的商店绑定，您将能享受</p>
				 <ul>
				 	<li><b>快捷支付</b></li>
				 	<li><b>共享购物车信息</b></li>
				 	<li><b>存储多个收货地址</b></li>
				 	<li><b>查看和跟踪您的订单在您的帐户</b></li>
				</ul>
				<br>
				<a href="register.html"><b style="color: #B2B2B2; font-size: 20px">注册</b></a>
			</div>
		<div class="clearfix"> </div>
		</div>
	</div>
</div>

<!--footer-->
<div class="footer">
	<div class="container">
		<div class="footer-top">
			<div class="col-md-4 top-footer1">
				<h2>Newsletter</h2>
					<form>
						<input type="text" value="" onfocus="this.value='';" onblur="if (this.value == '') {this.value ='';}">
						<input type="submit" value="SUBSCRIBE">
					</form>
			</div>
			<div class="clearfix"> </div>	
		</div>	
	</div>
	<div class="footer-bottom">
		<div class="container">
				<div class="col-md-3 footer-bottom-cate">
					<h6>Categories</h6>
					<ul>
						<li><a href="#">Curabitur sapien</a></li>
						<li><a href="#">Dignissim purus</a></li>
						<li><a href="#">Tempus pretium</a></li>
						<li><a href="#">Dignissim neque</a></li>
						<li><a href="#">Ornared id aliquet</a></li>
						
					</ul>
				</div>
				<div class="col-md-3 footer-bottom-cate">
					<h6>Feature Projects</h6>
					<ul>
						<li><a href="#">Curabitur sapien</a></li>
						<li><a href="#">Dignissim purus</a></li>
						<li><a href="#">Tempus pretium</a></li>
						<li><a href="#">Dignissim neque</a></li>
						<li><a href="#">Ornared id aliquet</a></li>
						
					</ul>
				</div>
				<div class="col-md-3 footer-bottom-cate">
					<h6>Top Brands</h6>
					<ul>
						<li><a href="#">Curabitur sapien</a></li>
						<li><a href="#">Dignissim purus</a></li>
						<li><a href="#">Tempus pretium</a></li>
						<li><a href="#">Dignissim neque</a></li>
						<li><a href="#">Ornared id aliquet</a></li>
						<li><a href="#">Ultrices id du</a></li>
						<li><a href="#">Commodo sit</a></li>
						
					</ul>
				</div>
				<div class="col-md-3 footer-bottom-cate cate-bottom">
					<h6>Our Address</h6>
					<ul>
						<li>Aliquam metus  dui. </li>
						<li>orci, ornareidquet</li>
						<li> ut,DUI.</li>
						<li>nisi, dignissim</li>
						<li>gravida at.</li>
						<li class="phone">PH : 6985792466</li>
					</ul>
				</div>
				<div class="clearfix"> </div>
				<p class="footer-class">Copyright &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
			</div>
	</div>
</div>

<!--//footer-->
</body>
</html>
<script type="text/javascript">
    $('#mpanel4').slideVerify({
        type : 2,		//类型
        vOffset : 5,	//误差量，根据需求自行调整
        vSpace : 5,	//间隔
        imgName : ['ck1.jpg', 'ck2.jpg'],
        imgSize : {
            width: '500px',
            height: '120px',
        },
        blockSize : {
            width: '40px',
            height: '40px',
        },
        barSize : {
            width : '500px',
            height : '40px',
        },
        ready : function() {
        },
        success : function() {
            $(" #flag ").val("1");
        },
        error : function() {
//		        	alert('验证失败！');
        }

    });
    $(document).ready(function(){
        $('#submit').click(function(){
            if($(" #account ").val().length==0){
                layer.msg("账号不能为空");
                return null;
            }
            if($(" #password ").val().length==0){
                layer.msg("密码不能为空");
                return null;
            }
            if($(" #flag ").val()==0){
                layer.msg("请完成验证码");
                return null;
            }
            $.ajax({
                type:'post',
                url:'/user/selectByPassword',
                data:$("#myform").serialize(),
                cache:false,
                dataType:'json',
                success:function(data){
                    if(data.code==200){

                        //加载动画
                        var ii = layer.load();
                        setTimeout(function(){
                            layer.close(ii);
                        }, 1000);

                        //跳转到主页
                        window.location.href="index.html";
                    }else {
                        //错误弹框
                        layer.msg(data.message);
                    }
                }
            });
        });
    });
</script>
<script>
    //调用检测自己的登录状态
    proveMe();

    //检测自己的登录状态
    function proveMe() {
        $.ajax({
            type:'post',
            url:'/user/proveMe',
            data:'',
            cache:false,
            dataType:'json',
            success:function(data){
                //已登录
                if(data.code==200){
                    var user = data.data.user;
                    var userid = user.userid;
                    var account = user.account;
                    var username = user.username;
                    var email = user.email;

                    //调用显示用户信息函数
                    showUser(username);
                }else{
                    //调用显示缺省值的函数
                    showDefault();
                }
            }
        });
    }

    //注销
    function removeMe() {
        $.ajax({
            type:'post',
            url:'/user/removeMe',
            data:'',
            cache:false,
            dataType:'json',
            success:function(data){
                if(data.status==200){
                    proveMe();
                }
            }
        });
    }

    //显示用户在线信息函数
    function showUser(username) {
        $("#userInfo").empty();
        $("#userInfo").append("<p class='log' style='width:250px;font-weight:400;font-size:20px;float: left;margin-top: 14px'>欢迎您，<a href='userInfo.html' style='color:black;display: inline;margin: 0;'>"+ username +"</a><a style='display: inline;color: #B2B2B2' onclick='removeMe()' href='#'>注销</a></p>");
    }

    //显示用户在线缺省值的函数
    function showDefault() {
        $("#userInfo").empty();
        $("#userInfo").append("<p class='log'><a href='account.html'  >登陆</a>"+
            "<span>or</span><a  href='register.html'  >注册</a></p>");
    }
</script>
